<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.web{
				width:600px;
				height:738px;
				
				margin: 0 auto;
				
				
			}
			.photo{
				width: 600px;
				height: 133px;
				
				margin-top: 1px;
				margin-bottom: 1px;
			}
			.top{
				width: 600px;
				height: 22px;
				background-color: #8fbbff;
				
			}
			td{
				text-align: center;
			}
			.left{
				display: inline-block;
				width: 150px ;
				height: 588px;
				background-color: #d2e6ff;
				padding-top: 1px;
				vertical-align: top;
			}
			.left-one{
				text-align: center;
				margin: 25px;
			}
			
			span{
				display: inline-block;
				font-size: 12px;
				margin-bottom: 21px;
				
			}
			.left-text{
				font-size: 12px;
				text-align: left;
			}
			.big-bottom{
				width: 600px;
				height: 588px;
				/* background: url(img/big.jpg) right */
				font-size: 0;
			}
			.right{
				font-size: 0;
				display: inline-block;
				width: 450px;
				height: 588px;
				background-image: url(img/big.jpg);
				
			}
			.right-one{
				display: inline-block;
				
				margin-top: 30px;
				margin-left: 30px;
				height: 64px;
			}
			.a{
				font-size: 16px;
				margin-bottom: 19px;
			}
			.right-two{
				display: inline-block;
				
				margin-top: 36px;
				margin-left: 30px;
				
			}
			.a1{
				
				margin-bottom: 18px;
				
				
			}
			.right-three{
				display: inline-block;
				
				margin-top: 36px;
				margin-left: 30px;
				}
				
			.right-four{
			
				
				margin-top: 30px;
				margin-left: 30px;
			}
			a{
				color: #2c5983;
				font-size: 16px;
			}
			p{
				font-size: 9px;
			}
		</style>
		
		<!-- 大背景 -->
		<body style="background-image: url(img/bg.jpg);">
			
		</body>
		<!-- 中心背景 -->
		<div class="web">
			<!-- 顶端图片 -->
			<div class="photo">
				<img src="./img/a.jpg" alt="">
				
			</div>
			<!-- 标题 -->
			<table class="top">
				<tr>
					<td>首页</td>
					<td>心情日记</td>
					<td>Free</td>
					<td>一起走到</td>
					<td>从明天起</td>
					<td>纸飞机</td>
					<td>下一站</td>
				</tr>
			</table>
			
			<!-- 左边 -->
			<div class="big-bottom">
			<div class="left">
				
				<div class="left-one">
					
					<img src="./img/3.jpg" alt="">
					<span>我的日记本</span>
					<p class="left-text">他们彼此相信，是瞬间迸发的热情让他们相遇。
					这样的确定是美丽的，但变幻无常更为美丽。</p>
					
				</div>
				<div class="left-one">
					<img src="./img/4.jpg" alt="" ><br>
					<span>心情轨迹</span>
					<p class="left-text">董事长的一切都让人既羡慕又嫉妒，但更让人受不了的是，
					有一天，上苍忽然赐给了他一个神奇的礼物。</p>
					
					
				</div>	
			</div>
			
			<div class="right">
				
				<div class="right-one">
					<p class="a1"><a href="#">介绍</a></p>
					<p class="b">我努力地抓紧世界，最后却被世界淘汰，如果一开始就松手，
					我会不那么伤心吗？你说，亲爱的孩子，世事难料，随他去吧</p>
					
				</div>
				
				<div class="right-two">
					<p class="a1"><a href="#">日记本</a></p>
					<p class="b">
						关于童年，你记住了多少？<br>
						两岁时，我拥有一只巨大的粉红猪，它总在我嚎啕大哭时逗我笑。<br>
						三岁时，我骑着小木马一路摇到外婆家，它不喝水也不吃草。<br>
						四岁时，我离家出走，在公车上睡着了，最后是太空超人送我回家。<br>
						我真的没骗你，我通通记得，照片为证。
					
					</p>
				
					
					
				</div>
				
				<div class="right-three">
					<p class="a1"><a href="#">地下铁</a></p>
					<p class="b">
						天使在地铁的路口，<br>
						和我说再见的那一年，<br>
						我渐渐看不见了。<br>
						十五岁生日的那年春秋早晨，<br>
						窗外下着毛毛细雨，<br>
						我喂好我的猫，<br>
						六点零五分。<br>
						我走进地下铁。
					</p>
					
					
				</div>
				
				<div class="right-four">
					<p class="a1"><a href="#">向左向右走</a></p>
					<p class="b">
						They're both convinced <br>
						that a sudden passion joined them <br>
						Such certainth is beautiful <br>
						but uncertainty is more beautiful still
					</p>
					
					
				</div>
			</div>
		</div>
	</body>
</html>
